<style lang="less" scoped>
  .btn-grp {
    padding:0;
  }
</style>

<template>
  <div class="contain">
    <div class="transMask" v-if="showMask"></div>
    <app-head :show="showstate" :title="pagetitle"></app-head>
    <div class="car-bbinfo-card mb30">
      <div class="bbno lineb">业务单号：{{data.BBillNo}}</div>
      <div class="bbmain">
        <p class="displayflex"><i>制单时间</i><label class="flex1">{{data.CreateTime | time}}</label></p>
        <p class="displayflex"><i>取货地址</i><label class="flex1">{{data.DepartureCity | city}}{{data.DepartureDistrict | district}}{{data.DepartureAddress}}</label></p>
        <p class="displayflex"><i>联系人</i><label class="flex1">{{data.PickContacts}} {{data.PickContactsTel}}</label></p>
        <p class="displayflex"><i>订单总件数</i><label class="flex1">{{data.Pkgs}}件</label></p>
        <p class="displayflex"><i>提货件数</i><label class="flex1">{{TotalCounts}}件</label></p>
      </div>
    </div>

    <div class="car-bbinfo-card">
      <div class="bbmain mb30">
        <x-textarea v-model="data.Memo" :placeholder="'备注'" :max="200" autosize style="color:#888; font-size:16px;"></x-textarea>
      </div>
    </div>

    <div class="car-bbinfo-card">
      <div class="bbmain mb30">
        <datetime class="vux-form" :format="'YYYY-MM-DD HH:mm'" v-model="leaveDate" :show.sync="visibility" :start-date="pickerStartDate" :end-date="pickerEndDate" title="实际驶离时间" placeholder="点击选择"></datetime>
      </div>
    </div>

    <uploader :title="'物流单据图片'" :img-list="imgListWL" :max="max"></uploader>
    <uploader :title="'业务单据图片'" :img-list="imgListYW" :max="max"></uploader>
    <uploader :title="'发票图片'" :img-list="imgListFP" :max="max"></uploader>
    <uploader :title="'车牌号图片'" :img-list="imgListCP" :max="max"></uploader>

    <div id="detailBottom" class="detail-bottom displayflex">
      <span>
        共计：<em class="red">{{TotalCounts}}</em> 件商品
      </span>
      <div class="flex1 btn-grp">
        <div @click="$router.go(-1)" class="btn gray">取消</div>
        <div @click="submit()" class="btn">提货完成</div>
      </div>
    </div>

  </div>
</template>

<script>
import appHead from '@/components/core/header/app_headbar.vue';
import uploader from '@/components/share/imageUploader/imageUploader.vue';
import tools from '../../tools/tool.js';
import { mapGetters, mapState } from 'vuex'

export default {
  components:{
    appHead,
    uploader,
  },
  data(){
    return{
      data:{
        Tratvehicleex:[],
      },
      Memo: '',
      imgListWL:[],
      imgListYW:[],
      imgListFP:[],
      imgListCP:[],

      max:9,
      leaveDate:'',
      pickerStartDate:'',
      pickerEndDate:'',
      visibility:false,
      showMask:false,
    }
  },
  watch: {
  },
  computed: {
    TotalCounts(){
      let sum = 0;
      this.data.Tratvehicleex.forEach(x => {
        sum += x.ConPKGS;
      })
      return sum;
    },
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    }
  },
  created(){
    this.leaveDate = tools.getNow(new Date(),'Min', 30, 'YMDHM');
    this.pickerStartDate = tools.getNow(new Date(),'Year', -3, 'YMD');
    this.pickerEndDate = tools.getNow(new Date(),'Year', 3, 'YMD');
    this.getData();
  },
  mounted(){
    
  },
  methods:{
    getData(){ 
      if(sessionStorage.getItem('pickUpOrderData')){
        this.data = JSON.parse(sessionStorage.getItem('pickUpOrderData'));
      } else {
        this.showMask = true;
        this.Toast({
          message: '未发现订单数据，请返回重试',
          duration: 1500,
        });
        setTimeout(() => { this.$router.go(-1) }, 1500);
      }
    },
    submit(){
      let imgurla = this.$sortImage(this.imgListWL),
          imgurlb = this.$sortImage(this.imgListYW),
          imgurlc = this.$sortImage(this.imgListFP),
          imgurld = this.$sortImage(this.imgListCP);

      let query = {
        goodslist : this.data.Tratvehicleex,
        Guid: this.data.AtvGuid,
        Memo: this.data.Memo,
        Pkgs: this.data.Pkgs,
        PRContactsTel: this.userinfo.MobileTel1,
        Receiver: this.userinfo.StaffID,
        ReceiverName: this.userinfo.Name,
        RowNo: this.data.RowNo,
        Volumn: this.data.Volumn,
        Weight: this.data.Weight,
        imgurla: imgurla,
        imgurlb: imgurlb,
        imgurlc: imgurlc,
        imgurld: imgurld,
        ActualDepartureDateTime: this.leaveDate,
      }
      this.Ajax.post("DriverDrawOrder", query).then(resp => {
        if(resp.IsSuccess){
          this.Toast({
            message: "操作完成",
            duration: 1000,
          });
          setTimeout(() => { this.$router.push({ path: '/driver/carDraw' }) }, 1000)
        } else {
          this.Toast({
            message: resp.ErrorMessage
          });
        }
      });
    }
  }
}
</script>
